<template>

	<div class="container text-center">

		<nav class="navbar navbar-collapse" role="navigation" style="background-color: #222222;">
			<div class="navbar-header">


				<router-link to="/home" class="navbar-brand">首页</router-link>

			</div>

			<ul class="nav navbar-nav">

				<li>
					<router-link to="/about" class="active">关于</router-link>
				</li>

				<li>
					
					<router-link to="/movie">电影</router-link>
				</li>
				<li>
					<router-link to="/play">播放</router-link>
				</li>
				<!-- 	          <li><router-link to="/playTemp">播放Temp</router-link></li> -->
				<li v-if="$store.getters.getUserName">	<router-link to="/publish">发布</router-link>
				</li>
				
				<li>
					<div class="input-group" style="width:20.25rem; margin-top:8px; margin-left: 5.25rem;">
						<input type="text" class="form-control" placeholder="电影搜索" v-model="kw">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" @click="input">搜索</button>
						</span>
					</div>
				</li>
				
					<li style="float:right; margin-left:0.125rem;" ><router-link to="/reg">注册</router-link></li>
								<li style="float:right; margin-left:36.625rem;"><router-link to="/login">{{!$store.getters.getUserName?"登录":$store.getters.getUserName}}</router-link></li>
			</ul>

		</nav>


		<router-view />
	</div>
</template>
<script>
	export default {
		name: 'app',
		data() {
			return {
				kw: ""
			}
		},
		methods: {
			input() {
				this.$router.replace({
					path: '/poster',
					query: {
						kw: this.kw
					}
				});
			}
		},
		created() {
			//在页面加载时读取sessionStorage里的状态信息
			if (sessionStorage.getItem("store") ) {
			
			this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
			
			}
			
			//在页面刷新时将vuex里的信息保存到sessionStorage里
			window.addEventListener("beforeunload",()=>{
			
			sessionStorage.setItem("store",JSON.stringify(this.$store.state))
			
			
			
			})
		},
		mounted() {
			// window.location.reload();
		}


	}
</script>

@import ('../assets/css/bootstrap.min.css')
<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	#nav {
		padding: 30px;

		a {
			font-weight: bold;
			color: #2c3e50;

			&.router-link-exact-active {
				color: #42b983;
			}
		}
	}

	.container {
		background-color: #eeeeee;
		margin-top: 0.015rem;
		padding-top: 0.025rem;
	}
</style>
